<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.info1{
				width: 300px;
				height: 100px;
				background: red;
				
				/* 
				 */
				/* overflow: hidden; */
				overflow: auto;
				/* overflow: scroll; */
			}
			
			.box{
				overflow: hidden;
			}
			.info2{
				width: 300px;
				height: 100px;
				background: blue;
				
				/* 跟随父元素属性overflow*/
				overflow: inherit;
			}
		</style>
	</head>
	
	<body>
		<!-- 
		 溢出属性overflow
		 取值：				   
		 auto: 自动，如果文本超出，即有滚动条
		 hidden: 超出部分隐藏
		 scroll：加上卷动条
		 注意点：
		 overflow:hidden作用:
		 1.去除文本超出标签的部份
		 2.清除浮动
		 3.让嵌套关系中的子元素可以设置margin-top，避免将外面一个盒子也会被顶下来
	
		 
		 
		 
		 -->
		<div class="info1">
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
			太阳高高照，我去上学校。太阳高高照，我去上学校。
		</div>
		
		
		<br />
		<div class="box">
			<div class="info2">
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。太阳高高照，我去上学校。
				太阳高高照，我去上学校。
			</div>
		</div>
	</body>
</html>
